// Uncomment this line to use CSS modules
// import styles from './app.module.css';
import NxWelcome from './nx-welcome';

import { Route, Routes, Link } from 'react-router-dom';

export function App() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <NxWelcome title="@project06/web" />

        {/* START: routes */}
        {/* These routes and navigation have been generated for you */}
        {/* Feel free to move and update them to fit your needs */}
        <br />
        <hr className="my-6 border-gray-200" />
        <div role="navigation" className="mb-8">
          <ul className="flex space-x-4">
            <li>
              <Link to="/" className="text-primary-600 hover:text-primary-800 font-medium">Home</Link>
            </li>
            <li>
              <Link to="/page-2" className="text-primary-600 hover:text-primary-800 font-medium">Page 2</Link>
            </li>
          </ul>
        </div>
        <div className="bg-white shadow rounded-lg p-6">
          <Routes>
            <Route
              path="/"
              element={
                <div>
                  <h2 className="text-2xl font-bold mb-4">Welcome to the Home Page</h2>
                  <p className="text-gray-600 mb-4">This is the generated root route with Tailwind styling.</p>
                  <Link to="/page-2" className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 transition-colors">Click here for page 2</Link>
                </div>
              }
            />
            <Route
              path="/page-2"
              element={
                <div>
                  <h2 className="text-2xl font-bold mb-4">Page 2</h2>
                  <p className="text-gray-600 mb-4">This is page 2 with Tailwind styling.</p>
                  <Link to="/" className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 transition-colors">Click here to go back to root page</Link>
                </div>
              }
            />
          </Routes>
        </div>
        {/* END: routes */}
      </div>
    </div>
  );
}

export default App;
